<script setup>
import { onShow, onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { getCurrentInstance, ref } from 'vue'
import { getMessagePageListAPI } from '@/services/message'
import { useMessageStore } from '@/stores'

/**
 * 查询参数
 */
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
})

/**
 * 加载状态
 */
const loadStatus = ref('noMore')

const dataSource = ref([])
const total = ref(0)

/**
 * 获取分页列表
 */
const getPageList = async () => {
  loadStatus.value = 'loading'
  const res = await getMessagePageListAPI(queryParams.value)
  if (res.code === 200 && res.message) {
    dataSource.value = [...dataSource.value, ...res.data.rows]
    total.value = res.data.total
    loadStatus.value =
      res.data.total > queryParams.value.pageNo * queryParams.value.pageSize ? 'more' : 'noMore'
  }
}

const onClickCard = (id) => {
  uni.navigateTo({ url: `/pages/message/detail?key=${id}` })
}

const onPreviewImage = (fileList) => {
  if (!fileList || fileList?.length < 1) return
  const urls = fileList.map((v) => v.url)
  uni.previewImage({
    urls: urls,
    content: 0,
  })
}

/**
 * 下拉刷新
 */
onPullDownRefresh(async () => {
  queryParams.value = {
    pageNo: 1,
    pageSize: 10,
  }
  dataSource.value = []
  await getPageList()
  uni.stopPullDownRefresh()
})

/**
 * 上拉加载更多
 */
onReachBottom(() => {
  if (dataSource.value.length >= total.value) return
  queryParams.value.pageNo++
  getPageList()
})

const instance = getCurrentInstance()
const messageStore = useMessageStore()

onLoad(async () => {
  instance.proxy.$forceUpdate()
})

onShow(async () => {
  queryParams.value = {
    pageNo: 1,
    pageSize: 10,
  }
  dataSource.value = []
  await Promise.all([getPageList(), messageStore.getUnReadCount()])
  if (messageStore.unReadCount > 0) {
    uni.setTabBarBadge({
      index: 1,
      text: `${messageStore.unReadCount}`,
    })
  } else {
    uni.removeTabBarBadge({ index: 1 })
  }
  instance.proxy.$forceUpdate()
})
</script>

<template>
  <view class="message">
    <view v-for="item in dataSource" :key="item.id">
      <uni-card spacing="0" :border="false" @click="onClickCard(item.id)">
        <template v-slot:title>
          <view class="title flex justify-between items-center p-20">
            <view class="title-label">{{ item?.title }}</view>
            <uni-badge
              :is-dot="true"
              :text="item.isRead === 0 ? '1' : ''"
              :offset="[-4, -4]"
              absolute="rightTop"
            >
              <view>{{ item?.createTime || '2024-01-01 12:00:00' }}</view>
            </uni-badge>
          </view>
        </template>
        <view class="flex">
          <image
            src="../../static/test.png"
            mode="scaleToFill"
            @click.stop="onPreviewImage(item.fileList)"
          />
          <view class="flex-1 ml-20">{{ item?.messageContent }}</view>
        </view>
      </uni-card>
    </view>
    <uni-load-more iconType="auto" :status="loadStatus" />
  </view>
</template>

<style scoped lang="scss">
.message {
  .title {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    border-bottom: 1px solid #f7f7f7;
    &-label {
      font-size: 13px;
      font-weight: 700;
      color: #333;
    }
  }
  image {
    width: 188rpx;
    height: 128rpx;
  }
}
</style>
